<template>
	<div style="width: 715px">
		<VueEditor style="width: 715px" useCustomImageHandler @image-added="handleImageAdded"
			:editorToolbar="customToolbar" v-model="content" v-show="type==1" @text-change="changeParentName">
		</VueEditor>
		<div class="html_text" v-show="type==2">
			<div class="html_btn">
				<span @click="ChangeType" class="el-icon-s-grid" title="视图"></span>
			</div>
			<textarea v-model="content"></textarea>
		</div>
	</div>

</template>

<script>
	import {
		addQuillTitle
	} from './quill-title.js'
	import {
		VueEditor
	} from 'vue2-editor'
	export default {
		name: 'Code',
		components: {
			VueEditor
		},
		props: {
			myName: String
		},
		data() {
			return {
				type: 1, //是否显示源码
				loading: false,
				content: this.myName,
				customToolbar: [
					['bold', 'underline', 'strike'],
					['blockquote', 'code-block'],
					[{
						'header': 1
					}, {
						'header': 2
					}],
					[{
						'indent': '-1'
					}, {
						'indent': '+1'
					}],
					[{
						'direction': 'rtl'
					}],
					[{
						'size': ['small', 'large', 'huge']
					}],
					[{
						'header': [1, 2, 3, 4, 5, 6, false]
					}],
					[{
						'color': []
					}, {
						'background': []
					}],
					[{
						'font': []
					}],
					['clean', 'image', 'sourceEditor'],
				],
				apiurl: '/api/',
			}
		},
		mounted() {
			addQuillTitle();
			this.initButton();
		},
		methods: {
			changeParentName: function() {
				this.$emit('handleChange', this.content);
			},

			handleImageAdded: function(file, Editor, cursorLocation) {
				var that = this;
				console.log(file);
				const data = new FormData();
				data.append('file', file);
				const xhr = new XMLHttpRequest();
				xhr.open('POST', that.apiurl + 'admin/upload_file');
				let token = that.common.GetStorage('token');
				xhr.setRequestHeader('Authorization', 'Bearer ' + token);
				xhr.onload = function() {
					if (xhr.status === 200) {
						const res = JSON.parse(xhr.responseText);
						console.log(res.fullurl)
						var _url = '//' + res.fullurl;
						Editor.insertEmbed(cursorLocation, 'image', _url);
						
					} else {
						// 处理上传失败的错误
					}
				};
				xhr.onerror = function() {
					// 处理上传失败的错误
				};
				xhr.send(data);

			},
			initButton: function() {
				var that = this;
				const sourceEditorButton = document.querySelector('.ql-sourceEditor');
				sourceEditorButton.classList.add('el-icon-s-grid');
				sourceEditorButton.onclick = function() {
					that.type = 2;
				}
			},
			ChangeType: function() {
				this.type = 1;
			}
		}
	}
</script>
<style scoped>
	.html_text {
		position: relative;
		padding-top: 40px;
		border: 1px solid #d0d0d0;
		border-radius: 8px;
		overflow: hidden;
	}

	.html_text .html_btn {
		position: absolute;
		left: 0;
		font-size: 18px;
		top: 0;
		cursor: pointer;
		padding: 8px 15px;
		border-bottom: 1px solid #d0d0d0;
		width: 715px;
		background-color: #fff;
	}

	.html_text textarea {
		height: 500px;
		resize: none;
		padding: 12px 8px;
		outline: none;
		border: none;
		width: 715px;
	}

	.ql-editor {
		min-height: 500px !important;
		overflow-y: auto;
	}

	.ql-sourceEditor {
		font-size: 20px !important;
		vertical-align: middle;
	}

	.ql-snow .ql-toolbar button,
	.ql-snow.ql-toolbar button {
		padding: 0;
	}
</style>